<template>
  <!-- 内容总结弹窗 -->
  <div>
    <el-dialog
      :model-value="isDialog"
      :show-close="false"
      :close-on-click-modal="false"
      class="summaryContent"
    >
      <template #header>
        <div
          class="dialogHeader font-size-18 font-weight-600 color-00085 display-flex flex-between"
        >
          <div>内容总结</div>
          <img
            class="dialogClose cursor-pointer"
            src="@/assets/images/dialogClose.png"
            alt=""
            @click="summaryClose"
          />
        </div>
      </template>
      <div class="summaryDetail color-00085">
        <p class="font-size-20 font-weight-500 margin-bottom-16">
          第<span>{{ summaryDetail?.studyTime }}</span
          >学时:
          <span>{{ summaryDetail?.title }}</span>
        </p>
        <p class="font-size-14">内容：</p>
        <p>{{ summaryDetail?.memo }}</p>
      </div>
      <!-- 背景图片 -->
      <img class="scanCode-bg" src="@/assets/images/scanCodePg.png" alt="" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue'
// 声明要触发的自定义事件
const emits = defineEmits<{
  (e: 'closeDialog'): void
}>()
// 声明要接收的参数
const props = defineProps({
  isDialog: {
    type: Boolean,
    default: false
  },
  summaryDetail: {
    type: Object,
    default: () => {}
  }
})
const summaryClose = () => {
  emits('closeDialog')
}
</script>

<style lang="scss">
:deep(.el-dialog) {
  width: 640px;
  height: 406px;
  padding: 0px;
  position: relative;
}
// 内容总结弹窗
.summaryContent {
  width: 640px;
  height: 406px;
  margin-top: 220px;
  background: #ffffff;
  box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.12);
  border-radius: 8px 8px 8px 8px;
  .el-dialog__body {
    padding: 0px 32px;
    box-sizing: border-box;
  }
}
.scanCode-bg {
  position: absolute;
  bottom: 0px;
  right: 0px;
}
</style>
